<template>
  <div class="nav">
    <ul>
      <li :class="{'active': curCate === 'live'}" @click="changeTab('live')"> 推荐</li>
      <li :class="{'active': curCate === 'all'}" @click="changeTab('all')"> 所有产品</li>
    </ul>
  </div>
</template>
<script setup>
const emits = defineEmits(['changeTab'])
const props = defineProps({
  curCate: {
    type: String,
    default: ''
  }
})
const changeTab = (tab) => {
  emits('changeTab', tab)
}
</script>
<style scoped>
.nav {
  width: 100%;
  padding: 8px 0px;
  background: rgb(33, 33, 33);
  display: flex;
  align-items: center;
}

.nav ul {
  width: 100%;
  max-width: 1160px;
  list-style: none;
  margin: 0px auto;
  height: 40px;
}
.nav ul li {
  float: left;
  color: rgb(255, 255, 255);
  margin-right: 59px;
  font-weight: 500;
  cursor: pointer;
  height: 100%;
  line-height: 35px;
}

.nav .active {
  border-bottom: 2px solid var(--color-main);
}
</style>
